<template>
  <div class="question-card-header">
    <!-- 左侧区域 -->
    <div class="left-section">
      <div class="section-item reo" @click="handleOpenModel">
        <img src="~@/static/quesitionCard.png" alt="问题卡片" class="question-icon" />
        <span class="section-label">答题卡</span>
      </div>
      <!-- <div class="section-item">
        <img
          src="~@/static/share-icon.png"
          alt="分享"
          class="share-icon"
          @click="handleShare"
        />

        <span class="section-label">分享</span>
      </div> -->
    </div>

    <!-- 右侧区域 -->
    <div class="right-section">
      <div class="right-section-label">记笔记</div>
      <div class="right-section-label">生词表</div>
      <!-- <el-button :disabled="hasPrevious" @click="handlePrevious" class="nav-button">
        <el-icon><ArrowLeft /></el-icon>
        上一题
      </el-button> -->

      <el-button v-if="!hasNext" @click="handleNext" class="nav-button">
        下一题
        <el-icon><ArrowRight /></el-icon>
      </el-button>

      <el-button
        v-else-if="hasNext && [3, 5].includes(examStore.examInfo.type3)"
        @click="handleNewQues"
        class="nav-button"
      >
        下一题
        <el-icon><ArrowRight /></el-icon>
      </el-button>

      <el-button v-else @click="submitPaperFn" class="nav-button"> 交卷 </el-button>
    </div>
    <div class="model-task">
      <AnswerSheet :modelValue="modelValue" @closeModal="handleCloseModal"></AnswerSheet>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import AnswerSheet from "../answerSheet/index.vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { handleCreateExam } from "@/service/exam.js";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
import { useTimer } from "@/stores/timer.js";
const timerStore = useTimer();
const router = useRouter();
// 定义组件属性
const props = defineProps({
  hasPrevious: {
    type: Boolean,
    default: true,
  },
  hasNext: {
    type: Boolean,
    default: true,
  },
});
const modelValue = ref(false);
// 定义事件
const emit = defineEmits(["previous", "next", "share"]);

/**
 * 处理上一题点击事件
 */
// const handlePrevious = () => {
//   if (examStore.currQuestion.index == 0 && examStore.currQuestion.sectionIndex !== 0) {
//     examStore.currQuestion.sectionIndex--;
//     examStore.currQuestion.index =
//       examStore.examInfo.section[examStore.currQuestion.sectionIndex].question.length - 1;
//   } else {
//     examStore.currQuestion.index--;
//   }
//   examStore.changeQuestion();
// };

/**
 * 处理下一题点击事件
 */
const handleNext = async () => {
  if (
    examStore.currQuestion.index ==
      examStore.examInfo.section[examStore.currQuestion.sectionIndex].question.length -
        1 &&
    examStore.currQuestion.sectionIndex !== examStore.examInfo.section.length - 1
  ) {
    examStore.currQuestion.sectionIndex++;
    examStore.currQuestion.index = 0;
  } else {
    examStore.currQuestion.index++;
  }

  // 提交试题
  examStore.submitQuestion();

  // 并做切换下一题操作
  examStore.changeQuestion();
};

// 顺序练习 或者 高阶练习  不交卷重新生成题
const handleNewQues = async () => {
  // 提交试题
  examStore.submitQuestion();

  console.log("创建新的题");
  const examData = {
    labelid: examStore.examInfo.labelid,
    num: 10,
    subject: examStore.examInfo.subject,
    time: 0,
    title: examStore.examInfo.title,
    type1: examStore.examInfo.type1,
    type2: examStore.examInfo.type2,
    type3: examStore.examInfo.type3,
  };
  let res = await handleCreateExam(examData);
  if (res.code == "000000") {
    // 请求题累加
    examStore.examInfo.section[0].question = examStore.examInfo.section[0].question.concat(
      res.data.section[0].question
    );
    examStore.currQuestion.index++;
  }
};

// 交卷事件
const submitPaperFn = async () => {
  const res = await examStore.submitPaper();
  if (res.code === "000000") {
    ElMessage.success("交卷成功");
    router.back();

    timerStore.quesTimeEnd();
    timerStore.paperTimeEnd();
  }
};

/**
 * 处理分享点击事件
 */
const handleShare = () => {
  emit("share");
};
const handleCloseModal = (value) => {
  modelValue.value = value;
  console.log(value);
};
const handleOpenModel = () => {
  modelValue.value = true;
};
</script>

<style lang="scss" scoped>
.question-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-top: 1px solid #eeeeee;
  position: relative;
  .left-section {
    display: flex;
    align-items: center;
    gap: 15px;
    .section-item {
      display: flex;
      align-items: center;
      position: relative;
      .section-label {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 19.6px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #333;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .question-icon {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }

    .share-icon {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
  }

  .right-section {
    display: flex;
    gap: 30px;
    align-items: center;
    .right-section-label {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 600;
      line-height: 19.6px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #333;
      cursor: pointer;
    }
    .nav-button {
      display: flex;
      align-items: center;
      gap: 5px;
      border: none;
      font-size: 14px;
      font-weight: 600;
      line-height: 19.6px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #333;
      &:hover {
        background-color: #fff;
      }
      &:disabled {
        cursor: not-allowed;
        opacity: 0.6;
      }
    }
  }
}
.model-task {
  position: absolute;
  bottom: 40px;
}
</style>
